<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放音乐</title>
    <style>
        body{
            display:flex;
            flex-direction:column;
        }
    </style>
</head>
<!--一个简单的播放器-->
<body>
    <audio src="./消愁.mp3"></audio>
    <button class="playPause">播放</button>
    <button class="prev">上一首</button>
    <button class="next">下一首</button>
    <div>当前时间:<span class="currentTime"></span></div>
    <div>总时间:<span class="duration"></span></div>
    <div>
        <input type="text" id="progress"><button class="jumpTo">跳到此处</button>
    </div>
    <button class="volumeUp">声音增加</button>
    <button class="volumeDown">声音减少</button>
    <script>
        var mp3=['消愁','雪落下的声音','桥边姑娘']
        var currentIndex=0
        var playing=false//代表一开始没有播放

        var oAudio=document.querySelector('audio')
        //onclick点击事件;点击进行播放否则不播放
        document.querySelector('.playPause').onclick=function(){
            if(playing){
                oAudio.pause()
                this.textContent='播放'
            }else{
                oAudio.play()
                this.textContent='暂停'
            }
            playing=!playing
        }
        //上一首歌
        document.querySelector('.prev').onclick=function(){
            currentIndex--;
            if(currentIndex<0){
                currentIndex=2;//循环，只有三首歌，循环的话第一个的前一个就是第三个,下标是2
            }
            var name="./"+mp3[currentIndex]+".mp3";
            oAudio.src=name
        }
        //下一首歌
          document.querySelector('.next').onclick=function(){
            currentIndex++;
            if(currentIndex>2){
                currentIndex=0;//循环，只有三首歌，循环的话第一个的前一个就是第三个,下标是2
            }
            var name="./"+mp3[currentIndex]+".mp3";
            oAudio.src=name
        }

        oAudio.ontimeupdate=function(){//timeupdate是一个事件，由currentTime指定时间更新
        //当前时间
            var ct=oAudio.currentTime//当前时间s
            var ctm=Math.floor(ct/60)//Math.floor:向下取整 min
            var cts=Math.floor(ct%60)//s
            document.querySelector('.currentTime').textContent=ctm+":"+cts//分：秒
            //总时间也可以直接写进来，播放就更新时间
            var dt=oAudio.duration//当前时间s
            var dtm=Math.floor(dt/60)//Math.floor:向下取整 min
            var dts=Math.floor(dt%60)//s
            document.querySelector('.duration').textContent=dtm+":"+dts//分：秒

        }
        //跳转到某百分比处：eg:跳转到50%的位置
        document.querySelector('.jumpTo').onclick=function(){
            var p=parseInt(document.querySelector('#progress').value)
            if(p<0){p=0}
            if(p>100){p=100}
            var ct=p/100*oAudio.duration  // p/100:算比例;duration:总时长 ct:当前时间
            oAudio.currentTime=ct
            document.querySelector('#progress').value=''
        }

        //声音增加
        document.querySelector('.volumeUp').onclick=function(){
            var volume=oAudio.volume;
            volume+=0.1
            if(volume>1){
                volume=1//最大声音是1，大于1就直接等于1
            }
            oAudio.volume=volume
        }
        //声音减少
        document.querySelector('.volumeDown').onclick=function(){
            var volume=oAudio.volume;
            volume-=0.1
            if(volume<0){
                volume=0//最大声音是1，大于1就直接等于1
            }
            oAudio.volume=volume
        }


<!--        //总时间-->
<!--        oAudio.onloadeddata=function(){//媒体的第一帧加载进来/有数据加载进来时更新总时间-->
<!--            var dt=oAudio.duration//当前时间s-->
<!--            var dtm=Math.floor(dt/60)//Math.floor:向下取整 min-->
<!--            var dts=Math.floor(dt%60)//s-->
<!--            document.querySelector('.duration').textContent=dtm+":"+dts//分：秒-->
<!--        }-->
    </script>
</body>
</html>